<script setup>
import { ref } from 'vue'
const list1 = ref([])
const list2 = ref(['a'])
const handleChange = arr => {
  console.log('改变了')
}
</script>

<template>
  <div>
    <h1 class="row-title">普通引入</h1>
    <div class="row">
      <lee-collapse v-model="list1" @change="handleChange">
        <lee-collapse-item title="测试1" name="a">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias maxime
          natus, fugiat similique officiis asperiores iste eos commodi quaerat
          numquam aliquam modi magni. Aliquam ut velit, praesentium reiciendis
          deleniti asperiores.
        </lee-collapse-item>
        <lee-collapse-item title="测试2" name="b">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias maxime
          natus, fugiat similique officiis asperiores iste eos commodi quaerat
          numquam aliquam modi magni. Aliquam ut velit, praesentium reiciendis
          deleniti asperiores.
        </lee-collapse-item>
        <lee-collapse-item title="测试3" name="c" disabled>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias maxime
          natus, fugiat similique officiis asperiores iste eos commodi quaerat
          numquam aliquam modi magni. Aliquam ut velit, praesentium reiciendis
          deleniti asperiores.
        </lee-collapse-item>
      </lee-collapse>
    </div>
    <h1 class="row-title">手风琴效果</h1>
    <div class="row">
      <lee-collapse v-model="list2" @change="handleChange" accordion>
        <lee-collapse-item title="测试1" name="a">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias maxime
          natus, fugiat similique officiis asperiores iste eos commodi quaerat
          numquam aliquam modi magni. Aliquam ut velit, praesentium reiciendis
          deleniti asperiores.
        </lee-collapse-item>
        <lee-collapse-item title="测试2" name="b">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias maxime
          natus, fugiat similique officiis asperiores iste eos commodi quaerat
          numquam aliquam modi magni. Aliquam ut velit, praesentium reiciendis
          deleniti asperiores.
        </lee-collapse-item>
      </lee-collapse>
    </div>
    <h1 class="row-title">自定义标题</h1>
    <div class="row">
      <lee-collapse v-model="list2" @change="handleChange" accordion>
        <lee-collapse-item name="a">
          <template #title>
            <div class="title">
              <span>Oh my god</span>
              <lee-icon icon="truck-fast"></lee-icon>
            </div>
          </template>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias maxime
          natus, fugiat similique officiis asperiores iste eos commodi quaerat
          numquam aliquam modi magni. Aliquam ut velit, praesentium reiciendis
          deleniti asperiores.
        </lee-collapse-item>
        <lee-collapse-item title="测试2" name="b">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias maxime
          natus, fugiat similique officiis asperiores iste eos commodi quaerat
          numquam aliquam modi magni. Aliquam ut velit, praesentium reiciendis
          deleniti asperiores.
        </lee-collapse-item>
      </lee-collapse>
    </div>
  </div>
</template>

<style scoped>
.title {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  i {
    margin-left: 20px;
    font-size: 20px;
    color: #f40;
  }
}
</style>
